<template>
  <titleheader></titleheader>
  <!-- 布局容器 -->
    <div class="common-layout" >
     
  <el-container style="height: 880px;">
    <!-- 侧边导航的宽度 -->
    <el-aside width="300px" style="background-color: #545c64;">      
      <!-- 侧边导航是滚动式的 -->
      <el-scrollbar>
        <!-- 菜单 默认打开index为1的菜单选项item -->
         <!-- @后面跟的是方法事件 -->
        <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="1"
        text-color="#fff"
        @Select="handleMenuSelect"
      >

      <!-- el-menu-item是菜单可选子选项  el-sub-menu是子菜单 可以用template+span为子菜单命名-->
          <!-- 第一个子菜单 -->
         <!-- 业务模块 -->
      <div style="color: #fff; font-size: 20px; padding-left: 30px;padding-top: 40px;padding-bottom: 20px;">主要业务</div>
      <div style="padding-left: 30px;">
      <el-menu-item index='1'>
          <!-- <el-icon><icon-menu /></el-icon> -->
          <el-icon><medal /></el-icon>
          <span style="font-size: 18px;">会员办理</span>
      </el-menu-item>
      <el-menu-item index="2">
          <el-icon><checked /></el-icon>
          <span style="font-size: 18px;">课程办理</span>
      </el-menu-item>
        <!-- 管理模块 -->
      <div style="color: #fff; font-size: 20px; padding-left: 30px;padding-top: 40px;padding-bottom: 20px;">管理</div>
        <el-menu-item index="3">
          <el-icon><star /></el-icon>
          <span style="font-size: 18px;">会员管理</span>
        </el-menu-item>
        <!-- 课程管理 -->
        <el-sub-menu>
          <template #title>
            <el-icon><list /></el-icon>
            <span index="4" style="font-size: 18px;">课程管理</span>
          </template>
            <el-menu-item index="4-1" style="font-size: 16px;">课程</el-menu-item>
            <el-menu-item index="4-2" style="font-size: 16px;">已报课程</el-menu-item>
        </el-sub-menu>
        <!-- 员工管理 -->
        <el-sub-menu>
          <template #title>
            <el-icon><user /></el-icon>
            <span index="5" style="font-size: 18px;">员工管理</span>
          </template>
          <!-- 员工分类 -->
            <el-menu-item index="5-1" style="font-size: 16px;">会籍顾问</el-menu-item>
            <el-menu-item index="5-2" style="font-size: 16px;">教练</el-menu-item>
        </el-sub-menu>
    </div>
       </el-menu>
      </el-scrollbar>
  <!-- 退出账号 -->
   <!-- <a href="注销账户"> -->
    <el-icon  @click="handleExit" :size="35" color="#fff" class="exit"><SwitchButton /></el-icon>
    <!-- </a> -->
    </el-aside>
     <!-- 菜单内容页面 -->
      <el-main style="padding: 20px; background-color: #f5f7fa; ">
         <!-- <component :is>实现动态挂载 -->
        <component :is="currentComponent"></component>
      </el-main>
    </el-container>

  </div>
</template>
<style>
.exit{
  padding-left: 220px;
  bottom: 60px;
}
.exit:hover{
  color: brown;
}
</style>

<script lang="ts" setup>
import { ref, shallowRef } from 'vue'
import titleheader from './titleheader.vue'
// 导入图标资源
import { Menu as User,List,Medal,Checked,Star,SwitchButton} from '@element-plus/icons-vue'
// 导入页面组件
import membership from './membership.vue'
import course from './course.vue'
// import membermanage from './membermanage.vue'
import MemberManagement from './MemberManagement.vue'
import coursemanage from './coursemanage.vue'
import mc from './mc.vue'
import huiji from './huiji.vue'
import coach from './coach.vue'
// import Router from 'express/lib/router'
import { useRouter } from 'vue-router'

// 将acIndex定义为响应数据 值为1 表示index=1默认打开第一个菜单项
const acIndex = ref('1')
// 指定当前展示的页面为会员办理 shallowRef用于动态切换组件 适用于不频繁更新的响应数据 减少渲染消耗
const currentComponent = shallowRef(membership)

// 菜单选择-页面变化事件
const handleMenuSelect = (index: string) => {
  // 将选择事件获取到的index值赋给acIndex
  acIndex.value = index
  // 使用switch-case实现根据index切换组件
  switch(index) {
    case '1':
      // 会员办理
      currentComponent.value =  membership
      break
    case '2':
      // 课程办理
      currentComponent.value = course
      break
    case '3':
      // 会员管理
      currentComponent.value = MemberManagement
      break
    case '4-1':
    // 课程管理
      currentComponent.value = coursemanage
      break
    case '4-2':
    // 已报课程
      currentComponent.value = mc
      break
    case '5-1':
    // 会籍顾问管理
      currentComponent.value = huiji
      break
    case '5-2':
    // 教练管理
      currentComponent.value = coach
      break
    default:
      // 其他情况都是打开membership
      currentComponent.value = membership
  }
}
// 创建router实例 实现退出跳转页面
const router = useRouter();
  const handleExit=()=>{
    router.push('/Login')
      }
</script>

